<!DOCTYPE html>
<html>

<head>
    <title>文件响应测试</title>
</head>

<body>
    <h1>文件响应测试</h1>
    <button onclick="testFileResponse()">测试文件响应</button>
    <div id="result"></div>

    <script>
        async function testFileResponse() {
            try {
                document.getElementById('result').textContent = '正在请求文件...';

                const response = await fetch('/file');
                console.log('文件响应状态:', response.status);
                console.log('响应头:', Object.fromEntries(response.headers.entries()));

                if (response.ok) {
                    const blob = await response.blob();
                    console.log('文件大小:', blob.size, '字节');

                    const url = URL.createObjectURL(blob);

                    const link = document.createElement('a');
                    link.href = url;
                    link.download = 'downloaded_file.txt';
                    link.textContent = '点击下载文件 (test_file.txt)';
                    link.style.display = 'block';
                    link.style.margin = '10px 0';
                    link.style.padding = '10px';
                    link.style.backgroundColor = '#007bff';
                    link.style.color = 'white';
                    link.style.textDecoration = 'none';
                    link.style.borderRadius = '5px';

                    document.getElementById('result').innerHTML = '';
                    document.getElementById('result').appendChild(link);

                    // 显示文件信息
                    const info = document.createElement('div');
                    info.innerHTML = `<br><strong>文件信息:</strong><br>大小: ${blob.size} 字节<br>类型: ${blob.type}`;
                    document.getElementById('result').appendChild(info);
                } else {
                    const errorText = await response.text();
                    document.getElementById('result').textContent = `文件下载失败:\n状态码: ${response.status}\n错误信息: ${errorText}`;
                }
            } catch (error) {
                console.error('文件下载错误:', error);
                document.getElementById('result').textContent = '错误: ' + error.message;
            }
        }
    </script>
</body>

</html>